<template>
	<div class="face_library_list">
		<el-row :gutter="16">
			<el-col :span="responsive" v-for="(item, index) in faceLibList" :key="index">
				<dl @click="handleLookDetail(item)">
					<dt>
						<img :src="item.url" alt="" />
					</dt>
					<dd :title="item.name">{{ item.name }}</dd>
				</dl>
			</el-col>
		</el-row>
		<el-button type="text" :loading="loading" @click="loadingMoreData">{{loadStatusText}}</el-button>
	</div>
</template>

<script>
import { facelib } from '@/api/search/index';
export default {
	data() {
		return {
			loading: false,
			responsive: 3,
			dataCount: 0,
			queryData: { page: 1, size: 48 },
			faceLibList: []
		}
	},
	computed: {
		isLoad() {
			return this.queryData.page * this.queryData.size < this.dataCount;
		},
		loadStatusText() {
			if(!this.isLoad) {
				return '数据已全部加载';
			} else if(this.loading) {
				return '数据加载中...';
			} else {
				return '加载更多数据';
			}
		}
	},
	mounted() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
		this.queryFaceLibData();
	},
	methods: {
		//获取人脸库数据
		async getFaceLibData() {
			let result = await facelib(this.queryData).then(res => res.data);
			let datas = !result.data ? [] : result.data;
			this.loading = false;
			this.dataCount = result.count;
			this.faceLibList = [...this.faceLibList, ...datas];
		},

		//查询数据
		queryFaceLibData() {
			this.loading = true;
			this.getFaceLibData();
		},

		//加载更多
		loadingMoreData() {
			if(this.isLoad) {
				this.queryData.page++;
				this.queryFaceLibData();
			}
		},

		//动态修改列
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			if(width >= 1920) {
				this.responsive = 2;
			} else if(width >= 1366) {
				this.responsive = 3;
			} else {
				this.responsive = 4;
			}
		},

		//查看数据详情
		handleLookDetail(data) {
			this.$emit('look', data);
		}
	}
}
</script>

<style lang="scss" scoped>
.face_library_list {
	flex: 1;
	overflow: auto;
	padding: 0 16px 16px;
	text-align: center;

	.el-col {
		margin-bottom: 16px;
	}

	dl {
		width: 100%;
		cursor: pointer;
	}

	dt {
		position: relative;
		width: 100%;
		padding-top: 100%;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	dd {
		margin-top: 8px;
		line-height: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.el-button {
		color: #606266;
		padding: 0;
	}
}
</style>